<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div_css5</title>
<style type="text/css">
body {
	background: #999;
	text-align: center;
	color: #333;
	font-family: arial, verdana, sans-serif;
}

#header {
	width: 776px;
	margin-right: auto;
	margin-left: auto;
	padding: 0px;
	background: #EEE;
	height: 60px;
	text-align: left;
}

#contain {
	margin-right: auto;
	margin-left: auto;
	width: 776px;
}

#mainbg {
	width: 776px;
	padding: 0px;
	background: #60A179;
	float: left;
}

#right {
	float: right;
	margin: 2px 0px 2px 0px;
	padding: 0px;
	width: 574px;
	background: #ccd2de;
	text-align: left;
}

#left {
	float: left;
	margin: 2px 2px 0px 0px;
	padding: 0px;
	background: #F2F3F7;
	width: 200px;
	text-align: left;
}

#footer {
	clear: both;
	width: 776px;
	margin-right: auto;
	margin-left: auto;
	padding: 0px;
	background: #EEE;
	height: 60px;
}

.text {
	margin: 0px;
	padding: 20px;
}
</style>
</head>
<body>
	<div id="header">header</div>
	<div id="contain">
		<div id="mainbg">
			<div id="right">
				<div class="text">
					right
					<p>1</p>
					<p>1</p>
					<p>1</p>
					<p>1</p>
					<p>1</p>
				</div>
			</div>
			<div id="left">
				<div class="text">left</div>
			</div>
		</div>
	</div>
	<div id="footer">footer</div>
</body>
</html>
